<template>
  <div class="communitydetail">
    <Header />
    <div class="allcontent">
      <h1>标题标题标题标题标题标题标题</h1>
      <div class="auther">
        <img src="@/assets/images/头像2.png" alt="" />
        <p>作者</p>
        <p>2023/11/18</p>
      </div>
      <div class="kuang">
        <p>
          正文终于从茧里挣脱出来了!我看着自己的翅膀，那是多么美丽的一双翅膀啊，衬托的我宛如一个精灵。想起前段时间的痛苦和孤寂，我不禁露出了欣慰的笑容。
          我在花中徜徉，亲吻着娇嫩的花瓣，和其他的蝴蝶一起旋转出属于我们的轻盈的舞步。突然我看到了一只毛毛虫，看到了她羡慕的眼神，那么，以前的我，也是这样的吧
        </p>
      </div>
      <p style="text-indent: 2em">
        正文终于从茧里挣脱出来了!我看着自己的翅膀，那是多么美丽的一双翅膀啊，衬托的我宛如一个精灵。想起前段时间的痛苦和孤寂，我不禁露出了欣慰的笑容。
        我在花中徜徉，亲吻着娇嫩的花瓣，和其他的蝴蝶一起旋转出属于我们的轻盈的舞步。突然我看到了一只毛毛虫，看到了她羡慕的眼神，那么，以前的我，也是这样的吧。
        过去的我，是多么渺小的一只毛毛虫啊，遭受着别人的不屑和嘲弄，日复一日地躲避着鸟类的追杀。而生命只给了我两个选择：要么做一个有熟练偷生技巧的毛毛虫，终生不得翻身，要么就经历难以想象的九死一生的磨难，成为一只蝴蝶。
        全家都劝我认命，不要再做挣扎。可是我不甘心!上天只是吝啬地给了我一条卑贱的生命，我凭什么要拖着这条生命到死都不能挣扎!
        我选择成为一只蝴蝶，即使九死一生，我也不要如此卑贱而没有希望地活着!
        饥饿，束缚，孤寂，恐惧。。。。。。而今，我骄傲地穿行于花丛中，花儿向我张开笑脸，鸟儿邀我一起游戏，我们日日欢歌笑语，享受着温暖的阳光。
        没有人再记得当初的那只毛毛虫，我的美丽覆盖了所有关于它的记忆。
      </p>
      <div class="last">
        <div class="last_small">
          <img src="@/assets/images/点赞.png" alt="" />
          <p>点赞</p>
        </div>
        <div class="last_small">
          <img src="@/assets/images/收藏.png" alt="" />
          <p>收藏</p>
        </div>
        <div class="last_small">
          <img src="@/assets/images/上传.png" alt="" />
          <p>上传</p>
        </div>
      </div>
      <div class="pinglun">
        <Comment showAvator @sendBtn="sendBtn" />
        <CommentList :data="commentList" @sendBtn="sendBtn" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/header/Header.vue";
import Comment from "@/components/comment/Comment.vue";
import CommentList from "@/components/comment/CommentList.vue";
import { QNURL } from "@/config/urlConfig";
import {
  getAllcommentList
  // articleComment
} from "@/api/community/index";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const communityId = route.query.communityId;

function sendBtn(val: string, data: any) {
  console.log(val, data);
}
const commentList = ref<any>([]);

async function getCommentListFun() {
  const res = await getAllcommentList({ articleId: communityId });

  commentList.value = res.data;
}
// const articleComment = ref<any>([]);
// async function articleCommentFun() {
//   const res = await articleComment({ articleCommentAddDto: "" });

//   articleComment.value = res.data;
//   console.log(articleComment.value, "--------------------------");
// }

onMounted(() => {
  getCommentListFun();
});
</script>

<style lang="scss" scoped>
.communitydetail {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-color);
  .allcontent {
    width: 1200px;
    margin: 10px auto;
    img {
      width: 1200px;
      height: 300px;
    }
    h1 {
      margin: 20px 0px;
    }
    .auther {
      display: flex;
      height: 35px;
      margin-bottom: 30px;
      img {
        width: 35px;
        height: 35px;
        margin-right: 15px;
      }
      p {
        line-height: 35px;
        margin-right: 15px;
      }
    }
    .kuang {
      border: 1px solid rgb(223, 219, 219);
      margin-bottom: 20px;
      background-color: rgb(255, 255, 255);
      p {
        padding: 30px;
      }
    }
    .pinglun {
      margin-top: 40px;
    }
    .last {
      display: flex;
      margin: 50px 0;
      .last_small {
        display: flex;
        margin-right: 50px;
        img {
          width: 35px;
          height: 35px;
          margin-right: 10px;
        }
        p {
          line-height: 35px;
        }
      }
    }
  }
}
</style>
